import { parseData } from "../../utils"
import Session from "../Session"
import Business from "./Business"
import Company from "./Company"
import Employee from "./Employee"
import Organization from "./Organization"

const Base = ({ className, basicInfo, companyData, chartData = {} }) => {
  const {
    employeeStructureChart,
    organizationStructureChart,
    businessTrendsChart
  } = chartData

  return (
    <Session
      title="一、基本情况"
      className={`${className} bg-gray-100`}
      style={{ backgroundImage: `url('bg_1.png')`, backgroundSize: "contain" }}
    >
      <div className="flex-1 flex justify-center flex-wrap gap-2">
        <Company className="w-[350px] h-[220px] p-2" basicInfo={basicInfo} />
        <Organization
          className="w-[400px] h-[220px] p-2"
          data={parseData(organizationStructureChart)}
        />
        <Employee
          className="w-[350px] h-[350px] p-2"
          data={parseData(employeeStructureChart)}
        />
        <Business
          className="w-[400px] h-[350px] p-2"
          companyData={companyData}
          businessTrends={parseData(businessTrendsChart)}
        />
      </div>
    </Session>
  )
}

export default Base
